﻿@page "/tests/cards"
<Row>
    <Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardImage Source="assets/images/gallery/9.jpg" Alt="Placeholder image">
            </CardImage>
            <CardBody>
                <CardTitle Size="5">Card title</CardTitle>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
                <Button Color="Color.Primary">Button</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardImage Source="assets/images/gallery/2.jpg" Alt="Placeholder image">
            </CardImage>
            <CardBody>
                <CardTitle Size="5">Card title</CardTitle>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
            </CardBody>
            <ListGroup Flush="true">
                <ListGroupItem>Cras justo odio</ListGroupItem>
                <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
            </ListGroup>
            <CardBody>
                <CardLink Source="#">Card link</CardLink>
                <CardLink Source="#">Another link</CardLink>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardImage Source="assets/images/gallery/3.jpg" Alt="Placeholder image">
            </CardImage>
            <CardBody>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardBody>
                <CardTitle Size="5">Card title</CardTitle>
                <CardSubtitle>Support card subtitle</CardSubtitle>

            </CardBody>
            <CardImage Source="assets/images/gallery/12.jpg" Alt="Placeholder image">
            </CardImage>
            <CardBody>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
                <CardLink Source="#">Card link</CardLink>
                <CardLink Source="#">Another link</CardLink>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is6.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block="true">Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block="true">Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block="true">Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block="true">Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block="true">Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<h4 class="m-t-20 m-b-20">Background variants</h4>
<Row>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Dark" WhiteText="true">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary">Button</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Primary" WhiteText="true">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Success" WhiteText="true">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Info" WhiteText="true">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Warning" WhiteText="true">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Dark" WhiteText="true">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
</Row>
<h4 class="m-t-20 m-b-20">Groups</h4>
<CardGroup>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="assets/images/gallery/9.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <CardText>
                <small class="text-muted">Last updated 1 mins ago</small>
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="assets/images/gallery/2.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <CardText>
                <small class="text-muted">Last updated 2 mins ago</small>
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="assets/images/gallery/3.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                Just a small text.
            </CardText>
            <CardText>
                <small class="text-muted">Last updated 3 mins ago</small>
            </CardText>
        </CardBody>
    </Card>
</CardGroup>
<h4 class="m-t-20 m-b-20">Deck</h4>
<CardDeck>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="assets/images/gallery/9.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <CardText>
                <small class="text-muted">Last updated 1 mins ago</small>
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="assets/images/gallery/2.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <CardText>
                <small class="text-muted">Last updated 2 mins ago</small>
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="assets/images/gallery/3.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                Just a small text.
            </CardText>
            <CardText>
                <small class="text-muted">Last updated 3 mins ago</small>
            </CardText>
        </CardBody>
    </Card>
</CardDeck>